<template>
	<div class="space"></div>
	<!-- 收货地址 -->
	<van-cell v-if="addressData.length === 0" title="暂无收货地址，点击添加收获地址" is-link @click="onAdd">
		<template #icon>
			<van-icon name="plus" class="add-icon" />
		</template>
	</van-cell>
	<van-cell v-else-if="!activeAddress" title="点击选择收货地址" is-link @click="onSelect" />
	<van-col v-else @click="onSelect" class="address">
		<van-row align="center">
			<span class="name">{{ activeAddress.consignee }}</span>
			<span class="mobile">{{ activeAddress.mobile }}</span>
		</van-row>
		<van-row class="detail">{{ activeAddress.region_text + ' ' + activeAddress.address }}</van-row>
	</van-col>
	<!-- 地址选择 -->
	<van-popup v-model:show="showSelectAddress" position="bottom" class="popup" :style="{ height: '70%' }">
		<van-address-list
			v-model="chosenAddressId"
			:list="addressList"
			:switchable="false"
			default-tag-text="默认"
			@click-item="onSelected"
			@add="onAdd" />
	</van-popup>

	<div class="space"></div>
	<!-- 商品列表 -->
	<div class="list">
		<van-card
			v-for="(item, index) in data"
			:key="item.id"
			:price="item.total"
			:title="item.product.name"
			:desc="'库存：' + item.product.stock"
			:num="item.nums"
			class="goods-card"
			:thumb="item.product.thumbs_text[0]">
			<template #tags>
				<span class="small">单价：{{ item.product.price }}</span>
			</template>
		</van-card>
	</div>

	<div class="space"></div>
	<!-- 备注 -->
	<van-field
		v-model="remark"
		rows="2"
		autosize
		label-width="28px"
		label="备注"
		type="textarea"
		maxlength="200"
		placeholder="请输入备注"
		show-word-limit />

	<van-submit-bar :price="price * 100" button-text="立即下单" @submit="onSubmit" />
</template>

<script setup>
const { proxy } = getCurrentInstance();

const business = proxy.$cookies.get('business');

const ids = ref(proxy.$route.query.ids);
// 没有提供ids参数
if (!ids.value && ids.value.length === 0) {
	proxy.$message('参数错误');
	proxy.$router.back();
}

const data = ref([]);
const addressData = ref([]);
const activeAddress = ref(null); // 选择的收货地址
const addressList = ref([]);
const showSelectAddress = ref(false);
const chosenAddressId = ref(null);
const remark = ref('');

const price = computed(() => {
	return data.value.reduce((pre, cur) => {
		return pre + cur.total;
	}, 0);
});

// 获取数据
const getData = async () => {
	if (!ids) return;
	const res = await proxy.$GET({
		url: '/cart/index',
		params: { busid: business.id, ids: ids.value.join() },
	});

	// console.log(res);

	if (res.code === 0) {
		proxy.$fail(res.msg);
		return;
	}

	data.value = res.data;
};

// 获取收获地址数据
async function getAddressData() {
	const res = await proxy.$POST({
		url: '/address/index',
		params: { busid: business.id },
	});
	console.log(res);
	if (res.code === 0) {
		proxy.$message(res.msg);
		return;
	}

	addressData.value = res.data;

	// 找出默认的
	for (const item of res.data) {
		if (Number(item.status) === 1) {
			activeAddress.value = item;
			break;
		}
	}

	addressList.value = res.data.map((t) => {
		return {
			...t,
			// 是否默认地址
			isDefault: t.status === '1',
			name: t.consignee,
			tel: t.mobile,
			address: t.region_text + t.address,
		};
	});
}

const onSubmit = async () => {
	if (!activeAddress.value) {
		proxy.$message('请选择收货地址');
		return;
	}

	const params = {
		busid: business.id,
		cartids: ids.value.join(),
		addressid: activeAddress.value.id,
		remark: remark.value,
	};

	const res = await proxy.$POST({
		url: '/order/add',
		params,
	});

	if (res.code === 0) {
		proxy.$fail(res.msg);
		return;
	}

	proxy.$success(res.msg);
	proxy.$router.push(res.url);
};

const onAdd = () => {
	proxy.$router.push('/address/add');
};

const onSelect = () => (showSelectAddress.value = true);

const onSelected = (item) => {
	activeAddress.value = item;
	showSelectAddress.value = false;
};

getData();
getAddressData();
</script>

<style scoped lang="scss">
// .list {
// 	background-color: #fff;
//   padding: 10px 5px;
// }
.goods-card {
	background-color: #fff;
}

.popup {
	background-color: #f8f8f8;
	:deep(.van-badge__wrapper) {
		display: none;
	}
}
.add-icon {
	background-color: #1989fa;
	color: #fff;
	padding: 4px;
	font-size: 16px;
	border-radius: 4px;
	margin-right: 10px;
}

.address {
	background-color: #fff;
	padding: 10px 15px;
	.name,
	.mobile {
		font-size: 15px;
	}
	.name {
		margin-right: 15px;
	}
	.detail {
		font-size: 13px;
		color: #999;
		margin-top: 4px;
	}
}
</style>
